<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .flex-container {
        display: flex;
        justify-content: center;
    }

    .center-div {
        width: 200px;
    }
    .top{
        width: 100%;
        display: flex;
        .topconxtop{
            width: 25%;
            position: relative;

            .topcon{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: red;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid red;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: red;
            }
            .topcon2{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: #CCC;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid #CCC;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt2{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: #CCC;
            }



        }






    }
</style>
<body>


<div class="top">

    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                1
            </div>
            <div style="margin-top: 6px">档案信息创建</div>
        </div>
        <div class="xt"></div>
    </div>
    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                2
            </div>
            <div style="margin-top: 6px">提交审核</div>
        </div>
        <div class="xt"></div>
    </div>
    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                3
            </div>
            <div style="margin-top: 6px">审核中</div>
        </div>
        <div class="xt"></div>
    </div>
    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                4
            </div>
            <div style="margin-top: 6px">审核完成</div>
        </div>
    </div>


</div>
    <div class="flex-container">
        <div class="center-div">
            <svg t="1732602839356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4263" width="200" height="200"><path d="M458.412715 512.477867l-164.4544 162.816a39.867733 39.867733 0 0 0-11.5712 27.511466 40.277333 40.277333 0 0 0 39.936 40.618667c10.990933 0.136533 21.6064-4.232533 29.354666-12.014933l164.1472-162.133334 163.7376 162.133334c7.4752 7.543467 17.681067 11.8784 28.330667 12.014933 10.410667-0.136533 20.343467-4.232533 27.784533-11.434667a39.799467 39.799467 0 0 0 0.546134-56.695466l-163.2256-162.474667 164.2496-162.133333a40.106667 40.106667 0 0 0 0-57.1392 41.096533 41.096533 0 0 0-57.685334 0l-163.874133 162.235733-164.0448-163.2256a41.096533 41.096533 0 0 0-57.685333 0 40.106667 40.106667 0 0 0 0 57.105067l164.4544 162.816zM515.620181 1024C229.992448 1023.112533-0.851285 793.258667 0.002048 510.429867c0.6144-204.526933 124.177067-389.12 314.197333-469.367467 265.659733-103.901867 566.0672 25.088 671.0272 288.085333 101.376 254.1568-16.657067 542.3104-268.219733 654.7456a518.587733 518.587733 0 0 1-201.386667 40.072534z" fill="#EC4956" p-id="4264"></path></svg>
            <div style="text-align: center">
                审核完成，已驳回
            </div>
        </div>
    </div>
    <div style="margin: 0 20%">
    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div class="form-group">
            <label class="col-sm-2 control-label">驳回理由</label>
            <div class="col-sm-10">
                <textarea  id="c-reason" class="form-control" rows="5" name="row[reason]" data-error="请填写驳回理由" required></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">上传附件:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-receipimages" class="form-control" size="50" name="row[receipimages]" type="text" >
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="faupload-receipimages" class="btn btn-danger faupload"
                                      data-input-id="c-receipimages"
                                      data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                                      data-multiple="true" data-preview-id="p-receipimages"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-receipimages" class="btn btn-primary fachoose"
                                      data-input-id="c-receipimages" data-mimetype="image/*" data-multiple="true"><i
                                class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-receipimages"></span>
                </div>
                <ul class="row list-inline faupload-preview" id="p-receipimages"></ul>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-10">
                <button type="submit" class="btn btn-primary btn-success reject" data-ids="{$ids}" data-type="{$type}" style="width: 50%">完成驳回</button>
            </div>
        </div>
    </form>
    </div>
</body>
</html>